<template>
  <div class="book-info" v-if="bookDoubanInfo !== undefined">
    <panel :title="$t('book.bookInfo')" :titleAlign="'center'">
      <div slot="content" class="content">
        <div class="img">
          <div class="container">
            <div class="bracket"></div>
            <div class="target">
              <img :src="bookDoubanInfo.image" alt="" />
            </div>
          </div>
        </div>
        <div class="info">
          <p class="title">
            <a :href="bookDoubanInfo.alt" target="_blank">{{
              bookDoubanInfo.title
            }}</a>
          </p>
          <p class="desc">
            <span>{{ $t("book.author") }}：</span
            >{{ bookDoubanInfo.author.join(" ") }}
          </p>
          <p class="desc">
            <span>{{ $t("book.publisher") }}：</span
            >{{ bookDoubanInfo.publisher }}
          </p>
          <p class="desc">
            <span>{{ $t("book.publishDate") }}：</span
            >{{ bookDoubanInfo.publish_date }}
          </p>
          <p class="desc">
            <span>{{ $t("book.pages") }}：</span>{{ bookDoubanInfo.pages }}
          </p>
          <p class="desc">
            <span>{{ $t("book.rating") }}：</span>
            <Rate :allowHalf="true" :disabled="true"></Rate>
          </p>
          <p class="desc">
            <Tag
              type="border"
              v-for="tag in bookDoubanInfo.tags"
              :key="tag.name"
              class="border-tag"
              >{{ tag.name }}</Tag
            >
          </p>
        </div>
        <div class="rating"></div>
      </div>
    </panel>
  </div>
</template>

<script type="text/ecmascript-6">
import Panel from "@/pages/components/utils/Panel";

export default {
  name: "book-info",
  props: {
    book: {
      Type: Object,
      default: undefined,
    },
  },
  data() {
    return {
      bookDoubanInfo: undefined,
    };
  },
  mounted() {
    this.getDoubanInfo(this.book);
  },
  methods: {
    getDoubanInfo(book) {
      if (book) {
        this.bookDoubanInfo = this.formatLocalBookInfo(book);
      } else {
        API.getDoubanInfo({
          id: book.douban_id,
          type: book.douban_type,
        })
          .then((response) => {
            this.bookDoubanInfo = this.formatBookInfo(response.data);
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    formatLocalBookInfo(book) {
      let bookInfo = {};
      bookInfo.title = book.book_name;
      bookInfo.image = book.book_image;
      bookInfo.author = book.book_author.split("，");
      bookInfo.publisher = book.book_publisher;
      bookInfo.publish_date = book.publish_date;
      bookInfo.pages = book.book_pages;
      bookInfo.tags = book.book_tags.split("，").map((tagName) => {
        return { name: tagName };
      });
      bookInfo.rating = book.book_rating;
      bookInfo.alt = book.book_url;
      return bookInfo;
    },
    formatBookInfo(book) {
      let bookInfo = {};
      bookInfo.title = book.title;
      bookInfo.image = book.images.medium;
      bookInfo.author = book.author;
      bookInfo.author_intro = this.formatContent(book.author_intro);
      bookInfo.publisher = book.publisher;
      bookInfo.publish_date = book.pubdate;
      bookInfo.pages = book.pages;
      bookInfo.summary = this.formatContent(book.summary);
      bookInfo.catalog = this.formatContent(book.catalog);
      bookInfo.tags = book.tags;
      bookInfo.rating = book.rating;
      bookInfo.alt = book.alt;
      return bookInfo;
    },
    formatContent(content) {
      return content.replace(/\n/g, "<br />");
    },
  },
  components: {
    panel: Panel,
  },
};
</script>

<style lang="stylus" scoped type="text/stylus" rel="stylesheet/stylus">
@import '~/assets/stylus/theme.styl';

.book-info {
  .content {
    padding: 15px 20px;
    border-left: 1px solid $default-border-color;
    border-right: 1px solid $default-border-color;
    border-bottom: 1px solid $default-border-color;
  }

  .img {
    position: relative;
    margin: 0 auto;
    width: 120px;
    overflow: hidden;

    .container {
      width: 100%;
      position: relative;
      overflow: hidden;

      .bracket {
        margin-top: 140%;
      }

      .target {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border: 1px solid $default-border-color;

        > img {
          width: 100%;
          height: 100%;
          transition: All 0.4s ease-in-out;
          transform: scale(1);
          zoom: 1;
        }
      }
    }
  }

  .info {
    padding: 15px;

    .title {
      margin-bottom: 5px;
      text-align: center;

      a {
        color: $default-title-color;
      }
    }

    .desc {
      font-size: 14px;
      font-weight: 100;
      line-height: 20px;
      color: $default-desc-color;
      text-align: center;
      margin-bottom: 3px;

      > span {
        color: $default-info-color;
        font-weight: 300;
      }
    }
  }

  &:hover {
    img {
      transition: All 0.4s ease-in-out;
      transform: scale(1.05);
      zoom: 1.05;
    }

    .info {
      .desc {
        color: $default-desc-hover-color;
      }
    }
  }
}
</style>
